<template>
    <div class="map" id="map-container">
        <div class="Addresssearch">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="地址">
                    <el-input v-model="formInline.Addresssearch" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <div class="" style="width: 50px"></div>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="longitude" placeholder="经度"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="latitude" placeholder="纬度"></el-input>
                </el-form-item>
            </el-form>

        </div>
        <div id="panel" v-show="dcc">

        </div>
    </div>
</template>

<script>
  //引入高德地图
  import AMapLoader from '@amap/amap-jsapi-loader'

  window._AMapSecurityConfig = {
    securityJsCode: 'fefdba8eaa3c7352ba99d6c5593fac2f'  //你的安全密钥
  }
  export default {
    name: '',
    data () {
      return {
        dcc:false,
        location: "", // input的内容
        map: null,//
        lnglat: [], // 经纬度数组 [lng,lat]
        auto: null,
        placeSearch: null,
        markers: [],
        driving: null,
        longitude:'',
        latitude:'',
        formInline: {
          Addresssearch: '',
        },
      }
    },
    created () {

    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
    },
    beforeDestroy() {
      if (!this.map) {
        return
      }
      this.map.destroy()
      this.map = null
    },

    methods: {
      initMap() {
        AMapLoader.load({
          key: "e486f75565e7a9d6b03a6369679aaa92", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
        })
          .then((AMap) => {
            this.map = new AMap.Map("map-container", {
              // 设置地图容器id
              viewMode: "2D", //  是否为3D地图模式
              zoom: 13, // 初始化地图级别
              center: [122.469019,30.720894], //中心点坐标
              resizeEnable: true,
            });
            // 监听鼠标点击事件
            this.map.on("click", this.clickMapHandler);
            // 函数调用（写入你先所需要的事件函数）
            // this.searchMap(); // POI关键字搜索




          })
          .catch((e) => {
            console.log(e);
          });
      },
// 点击地图事件获取经纬度，并添加标记
      clickMapHandler(e) {
      //  this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];

        this.longitude=e.lnglat.getLng();
        this.latitude=e.lnglat.getLat();
      },
// 地图关键字查询
      onSubmit() {
        this.dcc=true;
        // 清除地图上所有添加的覆盖物
        this.map.clearMap();
// 地址搜索
        if(!this.formInline.Addresssearch) return;
        let placeSearch = new AMap.PlaceSearch({
          city: '嵊泗县', // 兴趣点城市，支持城市名、citycode、adcode
          citylimit: true, // 是否强制在设置的城市内搜索，默认false
          // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
          pageSize: 50, // 每页条数，默认10，范围1-50
          pageIndex: 1, // 页码
          extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
           map: this.map, // 地图实例，可选
           panel: 'panel', // 结果列表的id容器，可选
          autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
        })
        placeSearch.search(this.formInline.Addresssearch, function(status, result) {
          console.log(result)
        })
        },



    },
    watch: {},

  }
</script>

<style scoped>


    #panel {
        position: absolute;
        background-color: white;
        max-height: 500px;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: 280px;
        z-index: 99999;
    }
.set .map{
  height: 600px;
}
    .map {
        width: 100%;
        height: 500px;
        position: relative;
    }
    .Addresssearch{
        position: absolute;
        top: 10px;
        left: 20px;
        height: 50px;
        width: 900px;
        z-index: 99;
        background: #fff;
        padding: 5px 0 0 10px;
    }
</style>
